<template>
  <div>
    <div class="home">
      <Navbar />
      <div class="serach">
        <input type="text" placeholder="耙耙柑" />
      </div>
      <Carousel :carouselData="carouselData" :activeIndex="0" />
      <div class="tags">
        <img src="@/assets/tags.png" alt="" />
      </div>
      <div class="verticalReduction">
        <img src="@/assets/vertical_reduction.png" alt="" />
        <button>立即使用</button>
      </div>
      <div class="classification">
        <div v-for="(item, index) in classificationList" :key="index">
          <img :src="item.imgUrl" alt="" />
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
      <div class="acactivity">
        <img src="@/assets/yiyuangou.png" alt="" />
        <img src="@/assets/duochong.png" alt="" />
      </div>
      <div class="cards">
        <div class="left">
          <div>
            <span>今日值得买</span>
          </div>
          <div>
            <div>
              <img src="@/assets/juzi.jpg" alt="" />
              <div>预估到手</div>
              <div>￥149</div>
            </div>
            <div>
              <img src="@/assets/chelizi.jpg" alt="" />
              <div>预估到手</div>
              <div>￥99</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div>
            <span>时令日历</span>
          </div>
          <div>
            <div>
              <img src="@/assets/yang.jpg" alt="" />
              <div>预估到手</div>
              <div>￥149</div>
            </div>
            <div>
              <img src="@/assets/xia.jpg" alt="" />
              <div>预估到手</div>
              <div>￥99</div>
            </div>
          </div>
        </div>
      </div>
      <TabBar :tabList="tabList" @getCommodity="getCommodityList">
        <template #content>
          <div class="tabList" v-if="!showLoading">
            <div
              v-for="(item, index) in commodityList"
              :key="index"
              class="tabListItem"
            >
              <img :src="item.imgUrl" alt="" />
              <div>{{ item.desc }}</div>
              <div>{{ item.desc2 }}</div>
              <div>
                <span>￥{{ separateNumber(item.price)[0] }}</span>
                <span>.{{ separateNumber(item.price)[1] }}</span>
              </div>
              <div>
                <div v-if="item.count !== 0">
                  {{ item.count >= 99 ? "99+" : item.count }}
                </div>
                <img
                  src="@/assets/add.png"
                  alt=""
                  @click="goAddShopCart(item)"
                />
              </div>
            </div>
          </div>
          <div v-else>
            <Loading :showLoading="showLoading" />
          </div>
        </template>
      </TabBar>
    </div>
  </div>
</template>

<script setup>
import Navbar from "@/components/Navbar.vue";
import Carousel from "@/components/Carousel.vue";
import TabBar from "@/components/TabBar.vue";
import banner1 from "@/assets/banner1.jpg";
import banner2 from "@/assets/banner2.jpg";
import banner3 from "@/assets/banner3.jpg";
import fruit from "@/assets/fruit.png";
import haicai from "@/assets/haicai.png";
import meat from "@/assets/meat.png";
import lengyin from "@/assets/lengyin.jpg";
import miandian from "@/assets/miandian.png";
import shucai from "@/assets/shucai.png";
import shuichan from "@/assets/shuichan.jpg";
import shushi from "@/assets/shushi.jpg";
import techan from "@/assets/techan.png";
import yuzhicai from "@/assets/yuzhicai.jpg";
import Loading from "@/components/Loading.vue";
import { ref, reactive, getCurrentInstance } from "vue";
import shopCartStore from "@/store/module/shopCart";

const shopCart = shopCartStore();
let showLoading = ref(true);
let tabList = reactive([
  {
    title: "人气推荐",
    type: 1,
    active: false,
  },
  {
    title: "春日限定",
    type: 2,
    active: false,
  },
  {
    title: "传承味道",
    type: 3,
    active: false,
  },
  {
    title: "早餐甜点",
    type: 4,
    active: false,
  },
]);
let carouselData = reactive([
  {
    imgUrl: banner1,
  },
  {
    imgUrl: banner2,
  },
  {
    imgUrl: banner3,
  },
]);
let classificationList = reactive([
  {
    imgUrl: fruit,
    title: "时令水果",
  },
  {
    imgUrl: haicai,
    title: "海外直采",
  },
  {
    imgUrl: meat,
    title: "品质肉禽",
  },
  {
    imgUrl: lengyin,
    title: "乳品冷饮",
  },
  {
    imgUrl: miandian,
    title: "面点烘培",
  },
  {
    imgUrl: shucai,
    title: "素菜",
  },
  {
    imgUrl: shuichan,
    title: "海鲜水产",
  },
  {
    imgUrl: shushi,
    title: "熟食丸料",
  },
  {
    imgUrl: techan,
    title: "特产馆",
  },
  {
    imgUrl: yuzhicai,
    title: "预制菜",
  },
]);
let commodityList = ref([]);
let axios = getCurrentInstance()?.appContext.config.globalProperties.$axios;
const goAddShopCart = (item) => {
  shopCart.addShopCart(item);
  shopCart.shopCartList.forEach((e) => {
    if (e.id === item.id) {
      item.count = e.count;
    }
  });
};
function separateNumber(number) {
  let [integerPart, decimalPart] = number.toString().split(".");
  return [Number(integerPart), Number(decimalPart)];
}
function getCommodityList(type) {
  showLoading.value = true;
  axios
    .get("/src/api/data.json")
    .then((response) => {
      showLoading.value = false;
      if (response.data.code === 200) {
        commodityList.value = response.data.data.filter((item) => {
          item.count = 0;
          return item.type === type;
        });
        shopCart.shopCartList.forEach((item) => {
          commodityList.value.forEach((commodity) => {
            if (item.id === commodity.id) {
              commodity.count = item.count;
            }
          });
        });
      }
    })
    .catch((error) => {
      console.error("error:", error);
    });
}
</script>

<style scoped lang="scss">
.tabList {
  margin: 0 2.667vw 1.333333vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  .tabListItem {
    width: 46.667vw;
    padding: 2.667vw;
    background-color: #fff;
    border-radius: 4vw;
    margin-bottom: 1.333vw;
    & > div {
      margin: 1.333vw 0;
    }
    img:nth-child(1) {
      width: 43.2vw;
      height: 37.867vw;
    }
    div:nth-child(2) {
      font-size: 3.467vw;
      max-width: 46.667vw;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    div:nth-child(3) {
      font-size: 2.667vw;
      color: rgb(232, 34, 14);
    }
    div:nth-child(4) {
      color: rgb(250, 43, 26);
      span:nth-child(1) {
        font-size: 5.067vw;
      }
      span:nth-child(2) {
        font-size: 3.467vw;
      }
    }
    div:last-child {
      text-align: right;
      position: relative;
      & > div {
        position: absolute;
        top: -8px;
        right: -3px;
        background-color: rgb(250, 43, 26);
        color: #fff;
        padding: 0.533vw;
        border-radius: 50%;
        font-size: 3.2vw;
      }
      img {
        width: 6.4vw;
        height: 6.4vw;
      }
    }
  }
}
.cards {
  margin: 0 2.667vw 1.333333vw;
  width: 94.667vw;
  height: 40vw;
  background: url("@/assets/cards_bg.png") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2.667vw 1.333333vw;
  position: relative;
  .left {
    & > div:nth-child(2) {
      & > div {
        div:nth-child(3) {
          width: 19.2vw;
          height: 7.467vw;
          background: url("@/assets/price_bg.png") no-repeat;
          background-size: cover;
          color: #fff;
          line-height: 5.333vw;
          text-align: center;
        }
      }
    }
  }
  & > div {
    width: 46.667vw;
    border-radius: 4vw;
    padding: 2.667vw;
    & > div:nth-child(1) {
      font-size: 4vw;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      position: absolute;
      top: 2.667vw;
      span:nth-child(2) {
        font-size: 3.2vw;
        color: #999;
      }
    }
    & > div:nth-child(2) {
      display: flex;
      justify-content: space-between;
      margin-top: 8vw;
      & > div {
        text-align: center;
        div:nth-child(2) {
          font-size: 2.667vw;
        }
        div:nth-child(3) {
          font-size: 3.2vw;
        }
        img {
          margin: 2.667vw 0;
        }
        div {
          margin-bottom: 2.667vw;
        }
      }
    }
  }
  img {
    width: 13.867vw;
    height: 13.867vw;
  }
}
.home {
  background-color: #f0f0f0;
  box-sizing: border-box;
  min-height: 100vh;
  width: 100vw;
}
.acactivity {
  margin: 0 2.667vw 1.333333vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 46.667vw;
    height: 11.467vw;
  }
}
.classification {
  display: flex;
  flex-wrap: wrap;
  font-size: 3.2vw;
  text-align: center;
  background-color: #fff;
  margin: 0 2.667vw 1.333333vw;
  border-radius: 4vw;
  & > div {
    flex: 1;
  }
  img {
    object-fit: cover;
    width: 14.666667vw;
    height: 14.666667vw;
    margin: 1.333333vw;
  }
}
.verticalReduction {
  margin: 0 2.667vw 1.333333vw;
  position: relative;
  button {
    position: absolute;
    top: 50%;
    right: 5%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 0;
    background-color: #ff5d3e;
    font-size: 3.2vw;
    border-radius: 4vw;
    color: #fff;
    width: 18.4vw;
    height: 5.066667vw;
  }
  img {
    width: calc(100vw - 5.333vw);
    opacity: 0.25;
    object-fit: cover;
  }
}
.tags {
  margin: -2.666667vw 0 0;
  img {
    width: 100vw;
    object-fit: cover;
  }
}
.serach {
  padding: 0 2.667vw 2.666667vw;
  box-sizing: border-box;
  background-color: #fff;
  width: 100vw;
  input {
    background: url("../../assets/search_1.png") no-repeat left center;
    background-size: 4vw 4vw;
    background-position-x: 3vw;
    width: calc(100vw - 5.333vw);
    border: 0;
    border: 1px solid #999;
    border-radius: 4vw;
    padding: 0 8vw;
    height: 8vw;
    line-height: normal;
    box-sizing: border-box;
    font-size: 3.466667vw;
  }
}
</style>
